<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <father></father>
    </div>

    <template id="father">
        <div class="father">
            <p>这是父组件 ==> {{parentMsg}}</p>
            <hr>
            <son @tell-dad="change"></son>
        </div>
    </template>
    <template id="son">
        <div class="son">
            <p>这是子组件</p>
            <p><button @click="tell">btn</button></p>
            <p>{{msg}}</p>
        </div>
    </template>

</body>
<script src="./base/vue.js"></script>

<script>

    
    //每一个组件或者实例都会有自定义事件，和触发事件的能力
    //父组件给子组件绑定一个自定义事件，这个事件的处理程序却是父组件的一个方法
    //当子组件触发这个事件的时候，相当于父组件的方法被执行

    Vue.component("father",{
        template:"#father",
        data(){
            return {
                parentMsg:""
            }
        },
        methods:{
            change(msg){
                this.parentMsg = msg
            }
        }
    })

    Vue.component("son",{
        template:"#son",
        //props:["tellDad"],
        methods:{
            tell(){
                //触发绑定在自身的事件  tell-dad
                //vue中通过this.$emit触发自定义事件  （事件名,参数）
                this.$emit("tell-dad",this.msg)
                // this.tellDad(this.msg);
            }
        },
        data(){
            return {
                msg:"今天天气不错！"
            }
        }
    })

    
    new Vue({
        el: "#app"
    })

</script>

</html>